<script>

  import sheep from '@/sheep';

  export default {
    name: 'anniversaryContent',
    data() {
      return {

        userInfo: {
          name: '张三',
          age: '18',
          dateBirth: '四月十九日',
          constellation: '摩羯座',
          shengXiao: '鼠',
        },
        list: [
          {
            name: '家庭成员',
          },
          {
            name: '家谱成员',
          },
          {
            name: '我朋友的',
          },
        ],
        current: 0,

      };
    },
    props: {
      bottomFlag: {
        type: Boolean, default: false,
      },
      anniversaryList: {
        type: [Array, Object],
        default: [],
      },
      options: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    methods: {
      async goBirthday(info) {
        console.log(info);
        if (info.countdown.day > 0) {
          sheep.$router.go('/pages/family/dayDetail', {
            type: 2,
            record_id: info.id,
            index: 0,
            family_id: info.family_id,
            id: this.options.family_id || info.genealogy_id,
            is_genealogy: this.options.is_flag == 3 || !!info.genealogy_id ? 1 : 0,
          });
        } else {
          const { code, msg } = await sheep.$api.family.checkAuth({
            family_id: info.family_id,
            action: 'add',
          });
          if (code != 1) {
            sheep.$helper.toast(msg);
            return;
          }
          sheep.$router.go('/pages/family/anniversary', {
            name: info.name || `${info.member_username}的纪念日`,
            is_flag: 1,
            isEdit: 1,
            isLeapMonth: info.isLeapMonth,
            anniversaryId: info.id,
            member_id: info.member_id,
            username: info.member_names,
            time_type: info.type || 2,
          });
        }
      },
      change(index) {
        this.current = index;
        this.$emit('change', index);
      },
      additionDay() {
        this.$nav.navigateTo('/pages/familyAnniversary/friendsDay/friendsDay');
      },
    },
  };
</script>

<template>
  <view class="anniversaryContent flex flex-column align-center">
    <!--    <view class="birthdayContent_tabs flex align-center mt——40">-->
    <!--      <view class="birthdayContent_tabs_content" v-for="(item, index) in list" :key="index" :style="{-->
    <!--        borderBottom: current == index ? '2px solid #FF4206' : 'none',-->
    <!--        color: current == index ? '#FF4206' : '#9F9F9F'-->
    <!--      }" @click.stop="change(index)">-->
    <!--        {{ item.name }}-->
    <!--      </view>-->
    <!--    </view>-->
    <!--    <view class="birthdayContent_search allRowCenter mt-40">-->
    <!--      <image class="birthdayContent_search_image" src="/static/shiqin-images/search.png" mode="widthFix"></image>-->
    <!--      <text class="birthdayContent_search_text">请输入姓名</text>-->
    <!--    </view>-->
    <view class="hW_40"></view>
    <view class="birthdayContent_list_content mb_37" v-if="current == 0" v-for="(item, index) in anniversaryList"
          :key="index" @click="goBirthday(item)">
      <image class="birthdayContent_list_content_image" v-if="current == 0 && !!item.date_public"
             :src="`${IMG_URL}/index/anniversary_qinren.png`"></image>
      <image class="birthdayContent_list_content_image" v-if="current == 0 && !!item.date_public"
             :src="`${IMG_URL}/index/anniversary_jilu.png`"></image>
      <image class="birthdayContent_list_content_image" v-else
             :src="`${IMG_URL}/index/anniversary_fired.png`"></image>
      <view class="birthdayContent_list_content_all flex align-center justify-between">
        <template v-if="!!item.date">
          <view class="avatar_list flex align-center" v-if="current == 0">
            <template v-if="!!item.member_list">
              <image :src="item2.avatar" v-for="(item2,index2) in item.member_list" :key="index2" width="51"
                     height="51" style="margin-right: 9rpx;border-radius: 50%" class="wh_51 hW_51"></image>
            </template>
            <template v-else>
              <image :src="item.image" width="51" class="wh_51 hW_51"
                     height="51" style="margin-right: 9rpx;border-radius: 50%"></image>
            </template>
          </view>
          <view class="avatar_list flex align-center" v-else>
            <image :src="item.image" width="51" class="wh_51 hW_51"
                   height="51" style="margin-right: 9rpx;border-radius: 50%"></image>
          </view>
          <view class="name" :style="{
            color:current == 0 && !!item.date_public ? '#F15927': current == 0 && !item.date_public ? '#FE9000' :'#F15927'
          }">
            {{ item.name }}
            <template v-if="item.status == 4">
              {{ item.full_year }}
            </template>
          </view>
          <view class="time flex align-center">
            <view class="ml_3">
              {{ item.gregorian_date }}
            </view>
            <view class="ml_30">
              {{ item.ganzhi_year }}{{ current == 2 ? item.lunar : item.lunar }}
            </view>
            <view class="ml_30">
              {{ item.week }}
            </view>
          </view>
          <view class="day_line">
          </view>
          <view class="icon flex align-center">
            <image :src="`${IMG_URL}/index/jiating_jinianriIcon.png`"></image>
            <view class="ml_6">
              倒计时
            </view>
          </view>
          <view class="day flex items-end">
            {{ item.countdown.day > 0 ? item.countdown.day : '今天' }}
          </view>
          <view class="unit" v-if="item.countdown.day > 0">
            天
          </view>
        </template>
        <template v-else>
          <view class="avatar_list flex align-center">
            <template v-if="!!item.member_list">
              <image-avater :src="item2.avatar" v-for="(item2,index2) in item.member_list" :key="index2" width="51"
                            height="51" style="margin-right: 9rpx;"></image-avater>
            </template>
            <template v-else>
              <image :src="item.image" width="51" class="wh_51 hW_51"
                     height="51" style="margin-right: 9rpx;border-radius: 50%"></image>
            </template>
          </view>
          <view class="name" :style="{
            color:current == 0 && !!item.date_public ? '#F15927': current == 0 && !item.date_public ? '#FE9000' :'#F15927'
          }">
            {{ item.name || `${item.member_username}的纪念日` }}
          </view>
          <view class="jiluyixia flex align-center justify-between">
            <view class="left flex align-center">
              <image :src="`${IMG_URL}/index/jiating_jiluyixia_icon.png`"></image>
              <view class="wenzi">
                记录一下
              </view>
            </view>
            <view class="right">
              唯有亲情最相思
            </view>
          </view>
        </template>
      </view>
      <view class="iconRight">
        <u-icon name="arflex-right" size="27" color="#FFFFFF"></u-icon>
      </view>
      <view class="family_name">
        <text class="family_name_text" :style="{
          color:current == 0 && !!item.date_public ? '#F15927': current == 0 && !item.date_public ? '#FE9000' :'#F15927'
        }">来自于{{ item.family_name || item.genealogy_name }}
        </text>
      </view>
    </view>
    <!--    <bottom-button title="添加家庭纪念日" :is-fixed="bottomFlag" class="mt-50" v-if="current == 0"-->
    <!--                   @elementClick="$nav.navigateTo('/pages/familyAnniversary/anniversary')"></bottom-button>-->
    <!--    <bottom-button title="添加朋友纪念日" :is-fixed="bottomFlag" class="mt-50" v-if="current == 2"-->
    <!--                   @elementClick="additionDay"></bottom-button>-->
    <view style="height: 80rpx"></view>
  </view>
</template>

<style scoped lang="scss">
  .anniversaryContent {
    width: 702rpx;


    .anniversariesList_content_userCard {
      width: 702rpx;
      height: 144rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      overflow: hidden;
      position: relative;

      .anniversariesList_content_userCard_image {
        width: 702rpx;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }

      .anniversariesList_content_userCard_left {
        .anniversariesList_content_userCard_left_info {
          .anniversariesList_content_userCard_left_info_name {
            .anniversariesList_content_userCard_left_info_name_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 30rpx;
              color: #292929;
            }

            .anniversariesList_content_userCard_left_info_name_image {
              width: 27rpx;
              height: 27rpx;
            }
          }

          .anniversariesList_content_userCard_left_info_personalAttributes {
            .anniversariesList_content_userCard_left_info_personalAttributes_age {
              .anniversariesList_content_userCard_left_info_personalAttributes_age_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #696969;
              }
            }

            .anniversariesList_content_userCard_left_info_personalAttributes_dateBirth {
              .anniversariesList_content_userCard_left_info_personalAttributes_dateBirth_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #696969;
              }
            }

            .anniversariesList_content_userCard_left_info_personalAttributes_constellation {
              .anniversariesList_content_userCard_left_info_personalAttributes_constellation_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #696969;
              }
            }

            .anniversariesList_content_userCard_left_info_personalAttributes_shengXiao {
              .anniversariesList_content_userCard_left_info_personalAttributes_shengXiao_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #696969;
              }
            }
          }
        }
      }

      .anniversariesList_content_userCard_right {
        .anniversariesList_content_userCard_right_image {
          width: 25rpx;
          height: 25rpx;
        }
      }
    }

    .birthdayContent_tabs {
      width: 702rpx;

      .birthdayContent_tabs_content {
        padding: 5rpx 0;
        margin: 0 21rpx;
        font-weight: 500;
        font-size: 34rpx;
        color: #9F9F9F;
      }
    }

    .anniversaryContent_search {
      width: 702rpx;
      height: 144rpx;
      background: #FFFFFF;
      border-radius: 20rpx;

      .anniversaryContent_search_content {
        width: 661rpx;
        height: 80rpx;
        background: #E5E5E5;
        border-radius: 40rpx 40rpx 40rpx 40rpx;

        .anniversaryContent_search_content_image {
          width: 32rpx;
          height: 32rpx;
        }

        .anniversaryContent_search_content_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #A0A0A0;
        }
      }
    }

    .anniversaryContent_info {
      position: relative;
      width: 702rpx;
      height: 155rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      overflow: hidden;

      .anniversaryContent_info_image {
        position: absolute;
        top: 0;
        left: 0;
        width: 702rpx;
        height: 155rpx;
      }

      .anniversaryContent_info_content {
        position: absolute;
        top: 0;
        left: 0;
        width: 702rpx;
        height: 155rpx;

        .anniversaryContent_info_content_left {
          .anniversaryContent_info_content_left_name {
            .anniversaryContent_info_content_left_name_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 30rpx;
              color: #FF6F41;
            }
          }

          .anniversaryContent_info_content_left_date {
            .anniversaryContent_info_content_left_date_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 300;
              font-size: 24rpx;
              color: #FF6F41;
            }
          }
        }

        .anniversaryContent_info_content_right {
          position: absolute;
          top: 25rpx;
          right: 220rpx;

          .anniversaryContent_info_content_right_day {
            .anniversaryContent_info_content_right_day_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 60rpx;
              color: #FF4206;
            }

            .anniversaryContent_info_content_right_day_textTip {
              font-family: PingFang SC, PingFang SC;
              font-weight: 300;
              font-size: 16rpx;
              color: #FF4206;
            }
          }

          .anniversaryContent_info_content_right_anniversary {
            .anniversaryContent_info_content_right_anniversary_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 300;
              font-size: 24rpx;
              color: #292929;
            }
          }
        }
      }
    }

    .anniversaryContent_bottomButton {
      width: 362rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 50rpx 50rpx 50rpx 50rpx;
      position: fixed;
      bottom: 50rpx;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;

      .anniversaryContent_bottomButton_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }
    }
  }

  .birthdayContent_search {
    width: 702rpx;
    height: 80rpx;
    background: #E5E5E5;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .birthdayContent_search_image {
      width: 32rpx;
      height: 32rpx;
    }

    .birthdayContent_search_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #A0A0A0;
    }
  }

  .family_name {
    position: absolute;
    right: 34rpx;
    bottom: 3rpx;

    .family_name_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #696969;
    }
  }

  .birthdayContent_list_content {
    width: 702rpx;
    height: 179rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    overflow: hidden;
    position: relative;

    .birthdayContent_list_content_image {
      position: absolute;
      top: 0;
      left: 0;
      width: 702rpx;
      height: 100%;
      z-index: 0;
    }

    .birthdayContent_list_content_all {
      position: absolute;
      top: 0;
      left: 0;
      width: 702rpx;
      height: 100%;

      .birthdayContent_list_content_left {
        .birthdayContent_list_content_left_name {
          .birthdayContent_list_content_left_name_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #000000;
          }
        }

        .birthdayContent_list_content_left_dayInfo {
          .birthdayContent_list_content_left_dayInfo_title {
            .birthdayContent_list_content_left_dayInfo_title_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 20rpx;
              color: #000000;
            }
          }

          .birthdayContent_list_content_left_dayInfo_day {
            .birthdayContent_list_content_left_dayInfo_day_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 60rpx;
              color: #000000;
              text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
            }
          }

          .birthdayContent_list_content_left_dayInfo_titles {
            .birthdayContent_list_content_left_dayInfo_titles_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 20rpx;
              color: #000000;
            }
          }
        }

        .birthdayContent_list_content_left_basicInformation {
          .birthdayContent_list_content_left_basicInformation_dateBirth {
            .birthdayContent_list_content_left_basicInformation_dateBirth_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #000000;
            }
          }

          .birthdayContent_list_content_left_basicInformation_dateBirthNV {
            .birthdayContent_list_content_left_basicInformation_dateBirthNV_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #000000;
            }
          }

          .birthdayContent_list_content_left_basicInformation_week {
            .birthdayContent_list_content_left_basicInformation_week_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #000000;
            }
          }
        }
      }
    }

  }


  .anniversariesList_content_userCard_left_info_personalAttributes_shengXiao {
    .anniversariesList_content_userCard_left_info_personalAttributes_shengXiao_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #696969;
    }
  }

  .birthdayContent_list_content_all {
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    width: 702rpx;
    height: 100%;

    .avatar_list {
      position: absolute;
      top: 13rpx;
      left: 26rpx;
    }

    .name {
      position: absolute;
      top: 69rpx;
      left: 26rpx;
    }

    .time {
      position: absolute;
      bottom: 33rpx;
      left: 26rpx;
      width: 440rpx;
      height: 30rpx;
      background: #F15927;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 22rpx;
      color: #FFFFFF;
    }

    .day_line {
      position: absolute;
      bottom: 33rpx;
      right: 36rpx;
      width: 240rpx;
      height: 6rpx;
      background: #F15927;
    }

    .icon {
      position: absolute;
      top: 89rpx;
      left: 362rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18rpx;
      color: #F15927;

      image {
        width: 24rpx;
        height: 24rpx;
      }
    }

    .day {
      position: absolute;
      bottom: 20rpx;
      right: 120rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 66rpx;
      color: #F15927;
    }

    .unit {
      position: absolute;
      bottom: 40rpx;
      right: 88rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18rpx;
      color: #F15927;
    }

    .jiluyixia {
      position: absolute;
      top: 113rpx;
      left: 28rpx;
      width: 294rpx;
      height: 35rpx;
      background: rgba(254, 144, 0, 0.79);
      padding: 0 12rpx;

      .left {
        image {
          width: 25rpx;
          height: 27rpx;
        }

        .wenzi {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #FFFFFF;
        }
      }

      .right {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18rpx;
        color: #FFFFFF;
      }
    }
  }

  .iconRight {
    position: absolute;
    top: 50%;
    right: 20rpx;
    transform: translateY(-50%);
  }
</style>